<template>
	<view class="mnemonic l-whitespace">
		<view class="iconfont iconluobu"></view>
		<view class="mnemonic-title">备份钱包助记词</view>
		<view class="mnemonic-content">
			助记词用户恢复钱包或重置钱包密码， 请仔细抄写下方助记词，我们将在下一步进行验证。
		</view>
		<view class="mnemonic-code creation">
			<block v-for="(key, index) in codes" :key="index">
				<view class="mnemonic-code-item creation-item">
					{{key}}
				</view>
			</block>
		</view>
		<view class="reset iconfont iconicon--gengxin"  @tap="getRegisterMnemonic"></view>
		<view class="mnemonic-btn active" hover-class="btn-hover" @tap="goPage">
			下一步
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			phone: '',
			codes: [],
			shuffleArr: []
		};
	},
	onLoad (key) {
		this.phone = key.phone
		this.getRegisterMnemonic()
	},
	onShow () {
	},
	computed: {
	},
	methods: {
		...mapActions([
			'setMnemonic'
		]),
		goPage () {
			this.setMnemonic(this.shuffle(this.shuffleArr))
			uni.navigateTo({
				url: '/pages/user/mnemonic/verify?phone=' + this.phone
			});
		},
		getRegisterMnemonic () {
			uni.showLoading({
				title: ''
			});
			this.$http.getRegisterMnemonic({tel: this.phone}).then(e => {
				if (e.data) {
					this.codes = e.data
					e.data.forEach((e, index) => {
						this.$set(this.shuffleArr, index, e)
					})
					uni.hideLoading()
				}
			})
		},
		shuffle (arr) {
			let len = arr.length;
			for (let i = 0; i < len - 1; i++) {
				let index = parseInt(Math.random() * (len - i));
				let temp = arr[index];
				arr[index] = arr[len - i - 1];
				arr[len - i - 1] = temp;
			}
			return arr;
		} 
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/mnemonic.scss';
.mnemonic {
	padding-top: 50upx;
}
</style>
